<!-- 二手 -->
<template>
	<view>
		<uni-search-bar @confirm="search" placeholder="输入楼盘名或地址" :focus="false" v-model="searchValue" @input="input" />
		<view class="screen">
			<view class="screen_btn">区域 ></view>
			<view class="screen_btn">价格 ></view>
			<view class="screen_btn">类型 ></view>
		</view>
		<view class="card" v-for="(item,index) in list" :key="index" @click="todel(item)">
			<image style="width: 100px; height: 75px; background-color: #eeeeee;margin-right: 10px;" :src="item.img"
				mode="">
			</image>
			<view class="card_text">
				<p class="card_title">{{item.title}}</p>
				<p class='crad_price'>{{item.price}}</p>
				<p class="card_city" v-if="item.city">{{item.city}}</p>
				<p class="card_room">{{item.room}}室{{item.living_room}}厅{{item.acreage}}</p>
				<p class="card_address"   v-if="item.tags.length">
					<span>{{item.tags[0]}}</span>
					<span>{{item.tags[1]}}</span>
					<span>{{item.tags[2]}}</span>
					<span>{{item.tags[3]}}</span>
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				searchValue: ''
			}
		},
		methods: {
			async getList() {
				const result = await uni.request({
					url: "http://api.shbwyz.com/api/second.html",
					method: 'GET'
				})
				console.log(result[1].data.data, '--------');
				if (result[1].data.code === 200) {
					this.list = result[1].data.data
				}
			},
			todel(item) {
				uni.navigateTo({
					url: `/pages/Detail/Detail?id=${item.id}`
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			// clear(res) {
			// 	uni.showToast({
			// 		title: 'clear事件，清除值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// },
			// cancel(res) {
			// 	uni.showToast({
			// 		title: '点击取消，输入值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// }
		},
		created() {
			this.getList()
		}
	}
</script>

<style>
	.card {
		display: flex;
		/* height: 250px; */
		padding: 15px 0;
		margin: 0 8px;
		justify-content: flex-start;
		border-bottom: solid 1px #f1f1f1
	}

	.card_text {
		flex: 1;
		width: 100%;
		font-size: 12px;
	}

	.card_text p:not(.card_title) {
		color: #919191;
	}

	.card_text .crad_price {
		float: right;
		color: #00ac00 !important;
		font-weight: 700;
		position: absolute;
		right: 15px;
	}

	.screen {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 44px;
	}

	.screen_btn {
		flex: 1;
		text-align: center;
		color: #919191;
	}

	button {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 0;
		outline: none,
	}

	.card_address {
		width: 100%;
		height: 20px;
	}

	.card_address span {
		display: inline-block;
		width: 20px;
		height: 20px;
		line-height: 20px;
		margin-left: 10px;
		text-align: center;
		margin-top: 8px;
	}

	.card_address span:first-child {
		background: #ffebef;
		color: #e24546;
	}

	.card_address span:nth-child(2) {
		background: #e8eaf6;
		color: #6a79d5;
	}

	.card_address span:nth-child(3) {
		background: #e0f7fa;
		color: #4f9859;
	}

	.card_address span:nth-child(4) {
		background: #e0f8fa;
		color: #579ca5;
	}
</style>
